<!doctype html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <meta charset="UTF-8">
    <title>基础信息配置</title>

    {% include 'template/baseCss.volt' %}
    <link href="/css/vendor/basic-info-config.less" rel="stylesheet/less" type="text/css">
    <script src="/js/less.min.js"></script>
</head>

<body>
<main>
    <div class="config-item" data-name="plane_area">
        <div class="title-bar">
            <p class="name">所属区域</p>
            <p class="action button">新 增</p>
        </div>
        <div class="info">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td>ID:<span class="identifier"></span></td>
                    <td class="option-wrap">区域:
                        <select>
                        </select>
                    </td>
                    <td>
                        <ul>
                            <li class="edit button">修改</li>
                            <li class="delete button">删除</li>
                        </ul>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="config-item" data-name="plane_model">
        <div class="title-bar">
            <p class="name">飞机型号</p>
            <p class="action button">新 增</p>
        </div>
        <div class="info">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td>ID:<span class="identifier"></span></td>
                    <td class="option-wrap">状态:
                        <select>
                        </select>
                    </td>
                    <td>
                        <ul>
                            <li class="edit button">修改</li>
                            <li class="delete button">删除</li>
                        </ul>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="config-item" data-name="plane_type">
        <div class="title-bar">
            <p class="name">飞机状态</p>
            <p class="action button">新 增</p>
        </div>
        <div class="info">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td>ID:<span class="identifier"></span></td>
                    <td class="option-wrap">状态:
                        <select>
                        </select>
                    </td>
                    <td>
                        <ul>
                            <li class="edit button">修改</li>
                            <li class="delete button">删除</li>
                        </ul>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="config-item" data-name="camera_model">
        <div class="title-bar">
            <p class="name">相机类型</p>
            <p class="action button">新 增</p>
        </div>
        <div class="info">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td>ID:<span class="identifier"></span></td>
                    <td class="option-wrap">状态:
                        <select>
                        </select>
                    </td>
                    <td>
                        <ul>
                            <li class="edit button">修改</li>
                            <li class="delete button">删除</li>
                        </ul>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</main>

<!-- 在body里面添加 -->


</body>

{% include 'template/baseJs.volt' %}

<script>

    var DataBindTool = {
        dataItem: false,
        curOperationItem: false,
        curOperationId: false,
        init: function () {
            this.dataItem = new Array();
            $(".config-item").each(function () {
                var control = $(this);
                var table = control.attr("data-name");
                if (table) {
                    var title = control.find(".name").eq(0).text();
                    var select = control.find("select").eq(0);
                    var idCon = control.find(".identifier").eq(0);
                    select.change(function () {
                        var item = $(this);
                        idCon.text(item.val());
                    });
                    var dataItem = {
                        "table": table,
                        "title": title,
                        "select": select,
                        "id_control": idCon
                    };
                    control.find(".action").eq(0).bind("click", function () {
                        DataBindTool.clickAdd(dataItem);
                    });
                    control.find(".edit").eq(0).bind("click", function () {
                        DataBindTool.clickEdit(dataItem);
                    });
                    control.find(".delete").eq(0).bind("click", function () {
                        DataBindTool.clickDelete(dataItem);
                    });
                    DataBindTool.dataItem.push(dataItem);
                    DataBindTool.requestData(dataItem);
                }
            })
        },
        requestData: function (dataItem) {
            feimaPost("/setting/dictList", {
                "action_key": REQUEST_ACTION_LIST,
                "table": dataItem.table
            }, function (result) {
                DataBindTool.bindSelect(dataItem.select, result.data);
                dataItem.id_control.text(dataItem.select.val());
                if (DataBindTool.curOperationId) {
                    dataItem.select.val(DataBindTool.curOperationId);
                }
                dataItem.select.trigger("change");
            });
        },
        clickAdd: function (item) {
            var title = "新增" + item.title;
            var hint = "请输入" + item.title;
            DataBindTool.curOperationItem = item;
            DataBindTool.showPopMessage({
                "title": title,
                "hint": hint,
                "action": "add"
            });
        },
        clickEdit: function (item) {
            if (item.select.val()) {
                var title = "修改" + item.title;
                var text = item.select.find("option:selected").text();
                DataBindTool.curOperationItem = item;
                DataBindTool.showPopMessage({
                    "title": title,
                    "text": text,
                    "action": "edit"
                });
            } else {
                FAlert("请选择需要编辑的选项");
            }
        },
        clickDelete: function (item) {
            DataBindTool.curOperationId = false;
            DataBindTool.curOperationItem = item;
            var text = "您确定删除:<font color=red>" + item.select.find("option:selected").text()+"</font>";
            FConfirm(text, function (result) {
                if(result){
                    feimaPost("/setting/dictList", {
                        "action_key": REQUEST_ACTION_DELETE,
                        "table": item.table,
                        "id": item.select.val()
                    }, function (result) {
                        if (result.status == 0) {
                            //刷新数据
                            DataBindTool.requestData(DataBindTool.curOperationItem);
                            FAlert("删除成功", function () {
                                DataBindTool.removePopMessage();
                            });

                        }
                    });
                }

            });
        },
        bindSelect: function (select, data) {
            var str = "";
            for (var key in data) {
                var value = data[key];
                str += "<option value='" + key + "'>" + value + "</option>";
            }
            select.html(str);
        },
        clickConfirm: function (action) {
            var dataItem = DataBindTool.curOperationItem;
            var id = dataItem.select.val();
            var text = $("#new-value").val();
            switch (action) {
                case "add": {
                    DataBindTool.curOperationId = false;
                    feimaPost("/setting/dictList", {
                        "action_key": REQUEST_ACTION_ADD,
                        "table": dataItem.table,
                        "name": text
                    }, function (result) {
                        if (result.status == 0) {
                            //刷新数据
                            DataBindTool.requestData(DataBindTool.curOperationItem);
                            FAlert("添加成功", function () {
                                DataBindTool.removePopMessage();
                            });

                        }
                    });
                }
                    ;
                    break;
                case "edit": {

                    DataBindTool.curOperationId = id;
                    feimaPost("/setting/dictList", {
                        "action_key": REQUEST_ACTION_UPDATE,
                        "table": dataItem.table,
                        "id": id,
                        "name": text
                    }, function (result) {

                        if (result.status == 0) {
                            //刷新数据

                            DataBindTool.requestData(DataBindTool.curOperationItem);
                            FAlert("更新成功", function () {
                                DataBindTool.removePopMessage();
                            });

                        }
                    });
                }
                    ;
                    break;
            }
        },
        showPopMessage: function (opt) {
            var title = "";
            var hint = "";
            var text = "";
            var action = "";
            if (opt) {
                title = opt["title"];
                hint = opt["hint"] ? opt["hint"] : "";
                text = opt["text"] ? opt["text"] : "";
                action = opt["action"] ? opt["action"] : "";
            }
            var msgStr = "<div id='pop-message' class='edit-box-mask'> <div class='edit-box center-vh'>" +
                    "<table class='center-vh' cellpadding='0' cellspacing='0'>" +
                    "<tr><td class='title'>" + title + "</td>" +
                    "</tr><tr>" +
                    "<td><input id='new-value' placeholder='" + hint + "' value='" + text + "'></td>" +
                    "</tr><tr><td class='comfirm-wrap'><p class='comfirm button' onclick=DataBindTool.clickConfirm('" + action + "')>确 定</p></td></tr>" +
                    "<tr><td><p class='cancel button' onclick='DataBindTool.removePopMessage()'>取 消</p></td></tr>" +
                    "</table></div></div>";
            $("body").append(msgStr);
        },
        removePopMessage: function () {
            $("#pop-message").remove();
        }
    }

    $(function () {
        DataBindTool.init();
    });


</script>

</html>






